<template>
  <div class="text-white">
    <div>进度: {{ mockProgress }}%</div>
    <button @click="startTasks">开始任务</button>
    <button @click="stopTasks">停止任务</button>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { parelleTask, RequestQueue } from "@/mock/utils/util.ts";

const mockProgress = ref('0');
const startTasks = () => {};
const stopTasks = () => {};

function mockRequest(id: number, delay = 0) {
  return () =>
    new Promise((resolve) => {
      setTimeout(() => {
        console.log(`Request ${id} 完成`);
        resolve(id);
      }, delay);
    });
}

// 使用示例
const queue = new RequestQueue(3).onProgress((progress) => {
  console.log(`当前进度: ${progress.toFixed(1)}%`);
  // 更新UI
  mockProgress.value = progress.toFixed(1);
});
async function runTasks() {
  for (let i = 1; i <= 50; i++) {
    queue.add(mockRequest(i, Math.random() * 1000));
    // 添加少量延迟，避免一次性添加太多任务
    await new Promise(resolve => setTimeout(resolve, 10));
  }

  await queue.waitForAll();
  console.log("所有任务完成");
}

// 启动任务
runTasks().catch(console.error);

// 使用parelleTask函数

const tasks = [
  mockRequest(1),
  mockRequest(2),
  mockRequest(3),
  mockRequest(4),
  mockRequest(5),
  mockRequest(6),
  mockRequest(7),
  mockRequest(8),
  mockRequest(9),
  mockRequest(10),
  mockRequest(11),
  mockRequest(12),
  mockRequest(13),
  mockRequest(14),
  mockRequest(15),
  mockRequest(16),
  mockRequest(17),
  mockRequest(18),
  mockRequest(19),
  mockRequest(20),
  mockRequest(21),
  mockRequest(22),
  mockRequest(23),
  mockRequest(24),
  mockRequest(25),
  mockRequest(26),
  mockRequest(27),
  mockRequest(28),
  mockRequest(29),
  mockRequest(30),
  mockRequest(31),
  mockRequest(32),
  mockRequest(33),
  mockRequest(34),
  mockRequest(35),
  mockRequest(36),
  mockRequest(37),
  mockRequest(38),
  mockRequest(39),
  mockRequest(40),
  mockRequest(41),
  mockRequest(42),
  mockRequest(43),
  mockRequest(44),
  mockRequest(45),
  mockRequest(46),
  mockRequest(47),
  mockRequest(48),
  mockRequest(49),
  mockRequest(50),
  mockRequest(51),
  mockRequest(52),
  mockRequest(53),
  mockRequest(54),
  mockRequest(55),
  mockRequest(56),
  mockRequest(57),
  mockRequest(58),
  mockRequest(59),
  mockRequest(60),
  mockRequest(61),
  mockRequest(62),
  mockRequest(63),
  mockRequest(64),
  mockRequest(65),
  mockRequest(66),
  mockRequest(67),
  mockRequest(68),
  mockRequest(69),
  mockRequest(70),
  mockRequest(71),
  mockRequest(72),
  mockRequest(73),
  mockRequest(74),
  mockRequest(75),
  mockRequest(76),
  mockRequest(77),
  mockRequest(78),
  mockRequest(79),
  mockRequest(80),
  mockRequest(81),
];

// parelleTask(tasks, 3, (progress) => {
//   console.log(`当前进度: ${progress}%`);
//   mockProgress.value = Math.floor(progress);
// }).then(() => {
//   console.log("所有任务完成");
// }).catch((error) => {
//   console.error("任务执行出错:", error)
// });
</script>
